<template>
    <div class="mvlist">
        <h3>MV</h3>
          <div class="wrapper" ref="wrapper">
            <ul class="content" ref="content">
               <li v-for="item in mvListData" :key="item.content_id">
                   <div class="cover">
                      <img :src="item.picurl" alt="">
                      <span>{{(item.listennum/10000)|numFilter(1)}}万</span>
                  </div>
                <span>{{item.mvtitle}}</span>
               </li>
            </ul>
          </div>
    </div>
</template>
 
 <script>
 import axios from 'axios'
 import BSroll from 'better-scroll'
 export default{
     data(){
        return{
            mvListData:[]
        }
     },
     methods:{
         getmvList(){
             axios.get("/api/new/mv")
             .then(res => {
                //  console.log(res)
                 console.log(res.data.data.list)
                 this.playListData=res.data.data.list;
                 this.betterScrollHorizontal(this.playListData.length,160)
             })
             .catch(err => {
                 console.error(err);
             })
         },
         betterScrollHorizontal(num,itemWidth){
            let width=num * itemWidth;
            this.$refs.content.style.width=width+"px";
            this.$nextTick(()=>{
                this.scroll=new BSroll(this.$refs.wrapper,{
                    scrollX:true,
                    scrollY:false,
                    startX:0,
                    click:true
                })
            })
         }
     },
     mounted(){
         this.getmvList()
     },
     filters:{
         numFilter(value,num){
            return parseFloat(value).toFixed(num);
         }
     }
 }
 </script>
 <style scoped>
   .mvlist{
       width: 90%;
       margin: 0 auto;
   }
   .mvlist>h3{
       text-align: left;
   }
   .wrapper{
     overflow: hidden;
 }
   ul.content>li{
       display: inline-block;
       width: 160px;
       vertical-align: top;
   }
   ul.content>li img{
      width: 90%;
      border-radius:20px
   }
   .cover{
       position: relative;
   }
   .cover>span{
       background-color: aquamarine;
       position: absolute;
       right: 10px;
       bottom: 5px;
       border-radius: 20px;
       width: 100px;
   }
    ul.content>li>span{
      font-size:12px;
      display: inline-block;
      width: 90%;
    }
 </style>